<template>
  <div class="good subpage">
    <my-head :title="$route.query.name"></my-head>
    <div v-if="good">
      <img :src="good.img" alt="" class="gimg" />
      <van-cell-group class="goodinfo">
        <van-cell title="商品类型" :value="good.type.text" />
        <van-cell title="商品单价" :value="good.price.toFixed(2) + '元'" />
        <van-cell title="商品折扣" :value="good.discount + '折'" />
        <van-cell title="购买数量">
          <template #default>
            <van-stepper v-model.number="value" min="1" />
          </template>
        </van-cell>
        <van-cell
          title="购买小计"
          :value="((good.price * value * good.discount) / 10).toFixed(2) + '元'"
        />
      </van-cell-group>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="评论" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="gotocart" />
      <van-goods-action-icon
        icon="like-o"
        :text="(likeFlag ? '已' : '') + '点赞(' + likeCount + ')'"
        :color="likeFlag ? '#ff5000' : '#323233'"
      />
      <van-goods-action-icon icon="star-o" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      good: null,
      value: 1,
      likeCount: 0,
      likeFlag: false,
      lid: "",
    };
  },
  methods: {
    gotocart() {
      this.checkLogin(() => {
        this.gotoWhere({
          name: "cart",
        });
      });
    },
    async getGoodOne() {
      let res = await this.$ajax.findGoods({
        gid: this.$route.query.id,
      });
      this.$nextTick(() => {
        (this.good = res[0]), this.$forceUpdate();
      });
    },
  },
  mounted() {
    this.getGoodOne();
  },
};
</script>

<style lang="scss" scoped>
.good {
  .gimg {
    width: 100%;
    height: 256px;
  }
}
</style>